<template>
  <div class="container">
    <template>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <span class="add">学科名称：</span>
            <el-input v-model="userObj.subjectName"></el-input>
            <!-- </el-form-item> -->
            <el-button size="small" @click="onSubmit">清除</el-button>
            <el-button size="small" type="primary" @click="xuanran">搜索</el-button>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-button @click="xinzheng" type="success" size="small" plain>
              <i class="el-icon-edit el-icon--right"></i>
              新增课程
            </el-button>
          </div>
        </el-col>
      </el-row>
      <!-- <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="学科名称">-->

      <!-- </el-form> -->

      <el-alert :title="'一共有'+this.counts+'条'" type="info" show-icon></el-alert>

      <!-- v-for="(item,index) in tableData" :key="index"  -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="100px"></el-table-column>
        <el-table-column prop="subjectName" label="学科名称" width=""></el-table-column>
        <el-table-column prop="username" label="创建者" width=""></el-table-column>

        
          <el-table-column label="创建日期" width="">
            <template slot-scope="scope">
            {{scope.row.addDate|format}}
             </template>
            </el-table-column>
       
        <el-table-column prop="isFrontDisplay" label="前台是否显示" width="">
          <template slot-scope="scope">
            <span v-if="scope.row.isFrontDisplay==1">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录" width=""></el-table-column>
        <el-table-column prop="tags" label="标签" width="100px"></el-table-column>
        <el-table-column prop="totals" label="题目数量" width=""></el-table-column>
        <el-table-column label="操作" width="400px">
          <!-- 4个操作模板 -->
          <template slot-scope="scope">
            <!-- {{scope.row}} -->
            <el-button type="text">
              <span @click="toDirtorys(scope.row)">学科分类</span>
            </el-button>
          <el-button type="text">
              <span @click="toTags(scope.row)">学科标签</span>
            </el-button>
           <el-button type="text">
              <span @click="handleEdit(scope.row)">修改</span>
            </el-button>
            <el-button type="text">
              <span @click="shanchu(scope.row)">删除</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
       background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="userObj.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="userObj.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.counts"
      ></el-pagination>
    </template>
    <!-- 编辑用户的表单对话框 -->

    <el-dialog title="修改学科" :visible.sync="dialogFormVisible" width="20%">
      <el-form ref="formEditDialog" :model="formEdit" :rules="rulesFormEdit" label-width="100px">
        <el-form-item prop="subjectName" label="学科名称">
          <el-input v-model="formEdit.subjectName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="formEdit.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增用户的表单对话框 -->
    <el-dialog title="学校名称" :visible.sync="dialogFormVisiblesss" width="20%">
      <el-form
        ref="formEditDialogs"
        :model="addformEdit"
        :rules="rulesFormEdit"
        label-width="100px"
      >
        <el-form-item prop="subjectName" label="新增学科">
          <el-input v-model="addformEdit.subjectName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="addformEdit.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisiblesss = false">取 消</el-button>
        <el-button @click="editForms(addformEdit.subjectName)" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, update, add } from "@/api/hmmm/subjects";
export default {
  data() {
    return {
      /* 编辑对话框数据 */
      dialogFormVisiblesss: false,
      addformEdit: {},
      values: true,
      //新增
      dialogFormVisible: false,
      formEdit: {},
      formLabelWidth: "80px",
      //  表单校验规则
      rulesFormEdit: {
        subjectName: [
          { required: true, message: "请输入", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        subjectNames: [
          { required: true, message: "请输入", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],

        // mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
      },
      //分页
      counts: 1,
      userObj: {
        // qusubjectNameery: "",
        subjectName:'',
        page: 1,
        pagesize: 10,
      },
      input: "",
      // //头部表单
      // formInline: {
      //   user: "",
      // },
      tableData: [],
    };
  },
  created() {
    //  console.log( this.formEdit.subjectNames)
    this.xuanran();
  },
  methods: {
    //渲染列表
    async xuanran() {
      const { data: res } = await list(this.userObj);
      console.log(res, 111);
      this.tableData = res.items;
      this.counts = res.counts;

      console.log(this.counts);
      console.log(this.tableData);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.userObj.pagesize = val;
      this.xuanran();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.userObj.page = val;
      this.xuanran();
    },
    //清空输入框
    onSubmit() {
      this.userObj.subjectName = "";
      this.xuanran();
    },
    //搜索框
    async sousuo() {
      const { data: res } = await list({
        subjectName: this.input,
      });
      console.log(res);
      this.tableData = res.items;
    },

    //删除按钮
    async shanchu(id) {
      const res2 = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
      console.log(res2, 88899);
      if (res2 == "confirm") {
        const { data: res } = await remove(id);
        // console.log(res, 4455)

        //  重新渲染最新表格数据
        this.xuanran();
      }
    },
    //  操作中的编辑按钮
    handleEdit(row) {
      //console.log(row, 6677)
      this.formEdit = row;
      this.dialogFormVisible = true;
    },
    //  操作中的编辑按钮
    editForm() {
      this.$refs.formEditDialog.validate(async (vaide) => {
        //console.log(vaide,5555556666);
        if (vaide) {
          const { data: res } = await update(this.formEdit);
          console.log(this.formEdit, 8899);
          this.dialogFormVisible = false;

          //  重新渲染最新表格数据
          this.xuanran();
        } else {
          return;
        }
      });
    },

    //  新增
    xinzheng() {
      this.dialogFormVisiblesss = true;
    },
    editForms(val) {
      console.log(val, this.addformEdit.isFrontDisplay);
      this.$refs.formEditDialogs.validate(async (vaide) => {
        //console.log(vaide,5555556666);
        if (vaide) {
          const { data: res } = await add({
            subjectName: val,
            isFrontDisplay: this.addformEdit.isFrontDisplay,
          });
          console.log(res, 8899);
          this.dialogFormVisiblesss = false;

          //  重新渲染最新表格数据
          this.xuanran();
        } else {
          return;
        }
      });
    },
    //学科目录
    toDirtorys(row) {
      this.$router.push({
        path: "directorys",
        query: {
          id: row.id,
          subjectName: row.subjectName,
        },
      });
    },
    // 学科标签
    toTags(row) {
      this.$router.push({
        path: "tags",
        query: {
          id: row.id,
          subjectName: row.subjectName,
        },
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.container {
  padding: 20px;
  background-color: #fff;

  .grid-content {
    margin-bottom: 20px;
    display: flex;
    .add {
      font-weight:700;
      width: 80px;
      height: 36px;
      line-height: 36px;
    }

    .el-input--medium {
      width: 200px;
      margin-right: 10px;
      ::v-deep.el-input__inner {
        width: 200px;
      }
      .el-button--default {
        margin-left: 10px;
      }
    }
  }
  .bg-purple-light {
    position: relative;
    .el-button--success {
      position: absolute;
      right: 0px;
    }
  }
  ::v-deep.dialog-footer {
    text-align: right;
  }
   .el-pagination {
    text-align: right;
    margin-top: 15px;
  }
}
</style>
